<template>
  <div class="retrieve">
    <div v-if="type === 'choose'">
      <div class="container" :style="{width: conWidth}" :class="{border: isborder}">
        <div class="tip-div">
          <span class="tip-span"  v-if="isTip">{{tip}}:</span>
          <!--<input class="retrieve-input" placeholder="请输入帐号/手机号">-->
          <div v-if="isText" class="inline">
            <p style="margin-left: -9px"  v-for="item in retrieveMans[rId]">{{item.name}}</p>
          </div>
          <div v-else class="inline">
            <div class="man-container" v-for="item in retrieveMans[rId]">
              <span :title="item.name">{{item.name}}</span>
              <i class="iconfont icon-x" @click="deleteMan(item)" v-if="isShowIcon(item) && !disabled"></i>
            </div>
          </div>
        </div>
      </div>
      <i class="iconfont icon-plus" @click="show" v-if="!disabled"></i>
    </div>

    <div class="retrieve-click" v-if = "type === 'click'" @click="show">
      <i class="iconfont icon-plus"></i>
    </div>

    <p class="color" style="margin: 0" v-if = "type === 'text'" @click="show"> {{tip}}</p>

    <div class="retrieve-input" v-if="type === 'input'">
      <input v-model="item.name" :style="{width: conWidth}" class="input-n120" v-for="item in retrieveMans[rId]"/>
      <i class="iconfont icon-plus" @click="show"></i>
    </div>

    <zz-dialog
      :title= title
      :visible = visible
      @close="close"
      :showFoot=false>
      <slot>
        <!--搜索-->
        <zz-search
          v-if="openSearch"
          :width= "414"
          searchType= ''
          holder='输入帐号/手机号码/用户名'
          @searchClick="searchCallBack"></zz-search>
        <button class="button-block manualRefresh" @click="manualRefresh" v-if="openSearch">刷新</button>
        <div class="retrieve-mans">
          <!--组件导航-->
          <div class="mans-menu" v-if="isShowNav">
            <div @click="typeClick(item)"
                 :style="{width: menuWidth}"
                 v-for="item in retrieveType"
                 v-if="item.show"
                 :class="{hover:item.hover }">{{item.name}}</div>
          </div>

          <!--人员列表-->
          <div class="mans-list">
            <div v-for="item in retrieveType">

              <!--项目成员-->
              <div v-if="item.type === 'project' && item.hover">
                <div v-bar v-show="memberList.length !== 0"  style="height: 325px">
                  <div>
                    <div
                      class="company-man"
                      v-for="item in memberList"
                      @click="mansCallBack(item)">{{item.mname}}</div>
                  </div>
                </div>
              </div>

              <!--公司成员-->
              <div v-if="item.type === 'company' && item.hover" class="company-re-list clear">

                <!--公司列表-->
                <div v-bar class="left" :class="{'full-width': !openEmployees}">
                  <zz-depart
                    class="left"
                    @departHandle = itemDepartClick
                    @companyHandle = itemCompanyClick
                    :openEmployees="openEmployees"
                    :textCompanyArr="textCompanyArr"
                    :textDepartArr="textDepartArr"
                    :isChooseCompany = isChooseCompany
                    :isFilter="isFilter"
                    :filterRule="filterRule"
                    :isChooseDepart = isChooseDepart
                    :isGetEmployees="openEmployees"
                  ></zz-depart>
                </div>

                <!--某个部门成员-->
                <div v-bar class="left" style="border-right: 0;" v-show="employees.length !== 0  && openEmployees">
                  <div>
                    <div
                      class="company-man"
                      v-for="item in employees"
                      @click="mansCallBack(item)">{{item.mName}}
                      <small v-if="item.departmentName">-{{item.departmentName}}</small></div>
                  </div>
                </div>

                <div class="left unEmployees" v-show="employees.length === 0 && openEmployees">
                  <p><i class="iconfont icon-warning"></i>无员工</p>
                </div>

              </div>

              <!--我的朋友-->
              <div v-if="item.type === 'friend' && item.hover">
                <!--字母索引-->
                <div class="friend-title">
                  <span :class="" @click="friendClick($event)">@</span>
                  <span v-for="n in 26" @click="friendClick($event)">{{String.fromCharCode(65+(n-1))}}</span>
                </div>
                <!--朋友列表-->
                <div class="friend-list">
                  <div class="letter-title">{{letter}}</div>
                  <div v-bar class="letter-list">
                    <div>
                      <div
                        class="letter-item"
                        v-for="item in friendList"
                        @click="mansCallBack(item)">{{item.name}}
                      </div>
                      <zz-none v-if="friendList.length === 0"></zz-none>
                    </div>
                  </div>
                </div>
              </div>

              <!--工人通讯录-->
              <div v-if="item.type === 'worker' && item.hover" class="company-re-list clear">
                <!--项目列表-->
                <div v-bar class="left" :class="{'full-width': !openWorkers}">
                  <zz-worker
                    ref="zzworker"
                    type="retrieve"
                    :openWorkers = openWorkers
                    :isRetrieve="true"
                    :isFilter="isFilter"
                    :filterRule="filterRule"
                    :isHasWorkerMid="isHasWorkerMid"
                    :isChooseGroup="isChooseDepart"
                    :isAllWorkers="isAllWorkers"
                    :isContact="isContact"
                    :isOpenContact="isOpenContact"
                    :isCooperator="isCooperator"
                    :isOpenProjectMember="isOpenProjectMember"
                    :isProjectManage="isProjectManage"
                    @setGroup="itemDepartClick"
                    @workers="setWorkers"></zz-worker>
                </div>

                <!--某个班组成员-->
                <div v-bar class="left" v-show="workers.length !== 0 && openWorkers">
                  <div>
                    <div class="company-man" v-for="item in workers"
                      @click="mansCallBack(item)">{{item.name}} <span v-if="item.choose" :class="{'chosen': item.choose}">(√)</span>
                    </div>
                  </div>
                </div>

                <div class="left unEmployees" v-if="workers.length === 0 && openWorkers">
                  <p><i class="iconfont icon-warning"></i>无工人</p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </slot>
    </zz-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import friend from './friend'
  import project from './project.js'
  export default {
    name: 'zz-retrieve',
    mixins: [friend, project],
    computed: {
      ...mapGetters({
        retrieveMans: 'getRetrieveMans', // 已选中成员列表
        employees: 'getEmployees' // 员工列表
      }),
      coretrieveType () {
        const type = []
        const company = {
          'name': this.openEmployees ? '公司成员' : '公司部门',
          'type': 'company',
          'key': 1,
          'hover': true,
          'show': true
        }
        if (this.isCompany) {
          company.hover = true
          type.push(company)
        }
        const worker = {
          'name': '项目通讯录',
          'type': 'worker',
          'key': 3,
          'hover': '',
          'show': true
        }
        if (this.isWorker) {
          type.push(worker)
        }
        const project = {
          'name': '项目成员',
          'type': 'project',
          'key': 4,
          'hover': '',
          'show': true
        }
        if (this.isProject) {
          type.push(project)
        }
        const friend = {
          'name': '我的朋友',
          'type': 'friend',
          'key': 2,
          'hover': '',
          'show': true
        }
        if (this.isFriend) {
          type.push(friend)
        }
        return type
      }
    },
    data () {
      return {
        visible: false,
        workers: [],
        menuWidth: '',
        viewType: 1,
        searchName: '',
        retrieveType: [],
        options: {
          halfCheckedStatus: true // 控制父框是否需要半钩状态
        }
      }
    },
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'choose'
      },
      title: {
        type: String,
        default: '选择人员'
      },
      conWidth: {
        type: String,
        default: '686px'
      },
      // 默认显示
      first: {
        type: String,
        default: 'company'
      },
      openSearch: {
        type: Boolean,
        default: true
      },
      // 是否显示导航栏
      isShowNav: {
        type: Boolean,
        default: true
      },
      // 是否开启公司通讯录
      isCompany: {
        type: Boolean,
        default: true
      },
      // 是否开启跨公司选择
      isAllowCompany: {
        type: Boolean,
        default: false
      },
      // 是否开启朋友通讯录
      isFriend: {
        type: Boolean,
        default: true
      },
      // 是否开启工人通讯录
      isWorker: {
        type: Boolean,
        default: true
      },
      // 是否开启项目成员
      isProject: {
        type: Boolean,
        default: false
      },
      // 是否开启选择多个
      multiple: {
        type: Boolean,
        default: true
      },
      // 是否开启全部工人选项
      isAllWorkers: {
        type: Boolean,
        default: true
      },
      // 是否打开参建各方 && 项目部成员
      isContact: {
        type: Boolean,
        default: false
      },
      // 是否加入参建各方
      isOpenContact: {
        type: Boolean,
        default: true
      },
      // 是否加入项目部成员
      isOpenProjectMember: {
        type: Boolean,
        default: true
      },
      // 是否加入项目部成员
      isCooperator: {
        type: Boolean,
        default: true
      },
      // 项目部成员是加入项目负责人&& 项目部管理员
      isProjectManage: {
        type: Boolean,
        default: false
      },
      isborder: {
        type: Boolean,
        default: true
      },
      rId: {
        type: String,
        default: 'retrieve'
      },
      isTip: {
        type: Boolean,
        default: true
      },
      tip: {
        type: String,
        default: '参与人'
      },
      // 是否开启过滤
      isFilter: {
        type: Boolean,
        default: false
      },
      // 过滤条件
      filterRule: '',
      // 是否开启右边选择工人
      openWorkers: {
        type: Boolean,
        default: true
      },
      // 是否开启右边选择员工
      openEmployees: {
        type: Boolean,
        default: true
      },
      // 是否开启选择部门
      isChooseDepart: {
        type: Boolean,
        default: true
      },
      // 是否开启选择全公司
      isChooseCompany: {
        type: Boolean,
        default: false
      },
      // 是否只显示有账号的工人
      isHasWorkerMid: {
        type: Boolean,
        default: false
      },
      singleCheck: {
        type: Boolean,
        default: false
      },
      textCompanyArr: {
        type: String,
        default: ''
      },
      textDepartArr: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否直接用文本，不用框
      isText: {
        type: Boolean,
        default: false
      },
      // 发项目时， 项目ID
      pjId: ''
    },
    watch: {
      isShow (value) {
        if (value) {
          this.show()
        } else {
          this.close()
        }
      }
    },
    mounted () {
      this.retrieveType = this.coretrieveType
    },
    methods: {
      // 弹出选择框
      show () {
        this.visible = true
        this.setMemu()
      },

      // 关闭选择框
      close () {
        this.visible = false
        this.$emit('close')
        this.friendList = []
      },

      // 初始化菜单
      setMemu () {
        let i = 0
        this.retrieveType.forEach(x => {
          switch (x.type) {
            case 'company':
              x.show = this.isCompany
              x.hover = this.first === x.type
              break
            case 'friend':
              x.show = this.isFriend
              if (this.first === x.type) {
                x.hover = true
                this.getFriend()
              } else {
                x.hover = false
              }
              break
            case 'worker':
              x.show = this.isWorker
              if (this.first === x.type) {
                this.viewType = 3
                x.hover = true
              } else {
                x.hover = false
              }
              break
            case 'project':
              x.show = this.isProject
              if (this.first === x.type) {
                this.viewType = 4
                this.getMemberList()
                x.hover = true
              } else {
                x.hover = false
              }
              break
          }
          if (x.show) {
            i++
          }
        })
        this.menuWidth = 1 / i * 100 + '%'
      },

      // 搜索回调
      searchCallBack (data) {
        this.searchName = data
        switch (this.viewType) {
          case 1:
            this.$store.dispatch({
              type: 'searchEmployee',
              searchKey: this.searchName
            })
            break
          case 2:
            this.getFriend()
            break
          case 3:
            this.$refs.zzworker[0].searchWorker(this.searchName)
            break
          case 4:
            this.searchMember()
            break
        }
      },

      // 设置工人
      setWorkers (workers) {
        this.workers = workers
      },

      // 选择班组 || 部门
      itemDepartClick (item) {
        if (this.type === 'click' || this.type === 'other') {
          this.clickHanled(item)
          return
        }
        this.chooseHandler(item)
        const node = {
          mid: item.id,
          mName: item.name,
          isDepart: true
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        })
        if (this.singleCheck) {
          this.close()
        }
      },
      chooseHandler (node) {
        this.$emit('chooseCallBack', node)
      },
      itemCompanyClick (item) {
        if (this.type === 'click') {
          this.clickHanled(item)
          return
        }
        const node = {
          mid: '',
          mName: '全公司',
          isCompany: true
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        })
      },
      // 选择人员
      mansCallBack (node) {
        if (this.type === 'click' || this.type === 'text' || this.type === 'other') {
          this.clickHanled(node)
        }
        this.$store.dispatch({
          type: 'actRetrieveMans',
          data: node,
          rId: this.rId,
          multiple: this.multiple
        }).then(() => {
          this.$emit('dispatchCallBack', node)
        })
        if (this.singleCheck) {
          this.close()
        }
      },
      // 选中人员直接触发事件
      clickHanled (node) {
        this.$emit('clickCallBack', node)
      },
      // 删除选中人员
      deleteMan (node) {
        this.$store.dispatch({
          type: 'delRetrieveMans',
          data: node.mid,
          rId: this.rId
        })
        this.$emit('delMan')
      },
      // 切换 显示类型
      typeClick (node) {
        this.retrieveType.forEach(x => {
          x.hover = false
        })
        node.hover = true
        this.viewType = node.key
        switch (node.key) {
          case 1:
            break
          case 2:
            this.getFriend('')
            break
          case 3:
            break
        }
      },
      // 刷新人员列表
      manualRefresh () {
        this.$store.dispatch({type: 'actSyncContacts'})
      },
      isShowIcon (item) {
        if (item.dStatus) {
          if (item.dStatus === 13 || item.dStatus === 14) {
            return false
          }
        }
        return true
      }
    }
  }
</script>

<style lang="scss">
  .retrieve{
    position: relative;
    vertical-align: top;
    .border{
      border: 1px $color-line solid;
    }
    .container{
      font-size: $font-size-small;
      padding: 3px 10px 3px 10px;
      line-height: 22px;
      min-height: 22px;
      border-radius: 3px;
      box-sizing: border-box;
      >div{
        min-height: 22px;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        .man-container{
          height: 20px;
          width: 70px;
          background: $color-light;
          border: 1px $color solid;
          line-height: 20px;
          color: #fff;
          text-align: center;
          display: inline-block;
          vertical-align: top;
          margin-right: 5px;
          span{
            font-size: $font-size-smallest;
            display: inline-block;
            width:49px;
            @include ellipsis
          }
          .icon-x{
            font-size: $font-size-smallest;
            display: inline-block;
            vertical-align: super;
            cursor: pointer;
            &:hover{
              color: red;
            }
          }
        }
      }
      .tip-div{
        .icon-mans{
          margin-top: 2px;
          color: $color-grid;
          display: inline-block;
        }
        .tip-span{
          display: inline-block;
        }
      }
      .retrieve-input{
        @include input-n(105px);
        font-size: $font-size-smallest;
      }
    }
    .manualRefresh{
      vertical-align: top;
    }
    .retrieve-mans{
      margin-top: 12px;
      border: 1px $color-line solid;
      font-size: $font-size-smallest;
      .mans-menu{
        height: 30px;
        line-height: 30px;
        color: $color-grid;
        font-size: $font-size-smallest;
        border-bottom: $color-line 1px solid;
        >div {
          display: inline-block;
          vertical-align: top;
          text-align: center;
          cursor: pointer;
          &:hover{
            color: $color;
          }
        }
        .hover{
          color: $color;
        }
      }
      .mans-list{
        >div {
          margin: 10px;
        }
        .company-re-list{
          >div{
            height: 325px;
            width: 223px;
            border-right: 1px $color-line solid;
            &:last-child{
              border-right: 0;
            }
            .hover{
              color: $color;
            }
          }
          .unEmployees{
            text-align: center;
            .icon-warning{
              color: $color;
              margin-right: 10px;
            }
          }
        }
        .company-man{
          font-size: $font-size-smallest;
          cursor: pointer;
          width: 100%;
          padding-left: 10px;
          line-height: 24px;
          @include ellipsis;
          &:hover{
            color: $color;
          }
        }
        .friend-title{
          span{
            display: inline-block;
            color: $color;
            margin-right: 8px;
            cursor: pointer;
            font-size: $font-size-smallest;
            &:hover{
              color: $color;
            }
            &:last-child{
              margin: 0;
            }
          }
        }
        .friend-list{
          .letter-title{
            line-height: 25px;
            background: $color-bg;
            padding: 0 10px;
            margin-top: 10px;
          }
          .letter-list{
            width: 447px;
            height: 272px;
            margin-top: 5px;
            .letter-item {
              font-size: $font-size-smallest;
              padding: 5px 0;
              cursor: pointer;
              width: 100%;
              line-height: 20px;
              @include ellipsis;
              &:hover{
                color: $color;
              }
            }
          }
        }
      }
      .full-width{
        width: 457px !important;
      }
    }
    .icon-plus{
      position: absolute;
      right: 8px;
      top: 7px;
      cursor: pointer;
      color: $color-grid;
      &:hover{
        color: $color-hover;
      }
    }
    .retrieve-click{
      border: 1px dashed $color-line;
      width: 40px;
      height: 40px;
      position: relative;
      text-align: center;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      &:hover{
        border: 1px dashed $color;
        .icon-plus{
          color: $color;
        }
      }
      .icon-plus{
        font-size: 22px;
        color: $color-grid;
      }
    }
    .retrieve-input{
      height: 28px;
    }
  }
</style>
